<template>
 <div>

   <div style="margin-top: 100px;margin-left: 100px">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"   label-width="80px">
       <el-form-item label="抖音直播链接" prop="platform">
         <el-input
           v-model="url"
           placeholder="请输入抖音直播链接"
           clearable
           @keyup.enter.native="getLink"
         />
       </el-form-item>

       <el-button @click="getLink">
         获取视频流链接
       </el-button>

       <div style="width: 500px;display: flex">
         视频流链接：
         <el-input
           disabled
           v-model="resLink"
         />
       </div>

     </el-form>

   </div>


   <webview class="webview"
            ref="webviewBrowser"
            :partition="partition"
            :src="url"
            allowpopups
            useragent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
            nodeintegration></webview>

 </div>
</template>

<script>
import {ipcApiRoute} from '@/api/main'
import { ExecuteFunc,formatCode } from "@/utils/execute"
// import { listAccount, getAccount, delAccount, addAccount, updateAccount } from "@/api/media/mediaManage";
import { Message } from "element-ui";

export default {
  name:"mediaIfame",
  data() {
    return {
      loading:false,
      queryParams:{},
      partition:'persist:login',
      url:'https://www.kuaishou.com/samecity',
      resLink:''
    };
  },

  watch:{
  },
  created(){
  },
  methods: {

    init(){
      this.webview = this.$refs.webviewBrowser
      this.webview.addEventListener('dom-ready', () => {
        this.webview.setZoomFactor(0.9);
      })
    },


     format(dataString)
      {
        //dataString是整数，否则要parseInt转换
        var time = new Date(dataString);
        var year = time.getFullYear();
        var month = time.getMonth()+1;
        var day = time.getDate();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        return year+'-'+(month<10?'0'+month:month)+'-'+(day<10?'0'+day:day)+' '+(hour<10?'0'+hour:hour)+':'+(minute<10?'0'+minute:minute)+':'+(second<10?'0'+second:second)
      },

     download(url,name){
      const a = document.createElement("a");
      a.href = url;
      a.download = name;
      a.click();
      a.remove();
    },



    /**
     * 获取抖音直播链接
     */
    async getLink(){
      let that = this;
      this.init()
      const resStatus = ExecuteFunc['kuaishou']['getTongcheng'];
      await this.webview.executeJavaScript(resStatus).then((res)=>{
        console.log(JSON.parse(res))
        let jsonData = JSON.parse(res);
        let videoList =  jsonData.data.sameCityData.feeds
        for(var i = 0 ; i < videoList.length;i++){
          let today = Date.parse(new Date(new Date().setHours(0,0,0,0)))
          if(videoList[i].photo.timestamp >  today){
            this.download(videoList[i].photo.photoUrl,i);
          }
        }
        console.log(videoList)
        // that.resLink = res
      })
      console.log(that.resLink)
    },


    //刷新
    handleClickReload(){
      this.$refs.webviewBrowser.reload()
    }

  }
}
</script>
<style scoped lang="scss" >

//::v-deep .el-dialog{
//  border-radius: 6px;
//}
// // .el-upload--picture-card 控制加号部分
// ::v-deep.hide .el-upload--picture-card {
//     display: none;
// }
// // 去掉动画效果
// ::v-deep .el-list-enter-active,
// ::v-deep .el-list-leave-active {
//     transition: all 0s;
// }
//
// ::v-deep .el-list-enter, .el-list-leave-active {
//   opacity: 0;
//   transform: translateY(0);
// }

//
//.dialogWapp{
//    margin-top: -20px;
//    display: flex;
//    justify-content: start;
//    flex-wrap: wrap;
//
//    .item{
//        height: 87px;
//        cursor: pointer;
//        margin: 4px;
//        text-align: center;
//
//        padding: 8px;
//        width: 88px;
//        border-radius: 6px;
//        margin-bottom: 10px;
//        img{
//            width:35px;
//            height: 35px;
//            text-align: center;
//            margin: 0 auto;
//            margin-bottom: 2px;
//        }
//        &:hover{
//            border: 1px solid #c2b3ff;
//        }
//    }
//}

.webview{
  height: calc(100vh - 157px);
  //width: 100%;
}
</style>

